<!--  -->
<template>
    <div class="search-wrap">
        <div class="follow-salon">
            <span class="follow">سالوننى قوشىۋېلىڭ</span>
            <span class="right-ico"><i class="icon iconfont icon-dianying1"></i></span>
        </div>
        <div class="slider">
            <van-swipe :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(image, index) in sliderUrls" :key="index">
                    <img :src="image">
                </van-swipe-item>
            </van-swipe>
            <div class="input-wrap">
                <span class="search-icon" @click='search'><i class="icon iconfont icon-sousuo1"></i></span>
                <input type="text" v-model="searchVal" placeholder="ئىزدىمەكچى بولغان كىنونىڭ ئىسمىنى بېسىڭ" @keyup.enter="search">
            </div>
        </div>
    </div>
</template>

<script>
import { shareFrend, shareMoments } from "@/utils";
export default {
    data() {
        return {
            searchVal: "",
            sliderUrls: [
                "http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1256666.jpg",
                "http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1256665.jpg",
                "http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1257943.jpg",
                "http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1257979.jpg",
                "http://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/1256664.jpg"
            ],
            value: ""
        };
    },
    mounted() {
        shareFrend(this);
        shareMoments(this)
    },
    methods: {
        search() {
            this.$router.push({
                name: "VideoList",
                query: { from: "search", query: escape(this.searchVal) }
            });
        }
    },
    components: {}
};
</script>
<style lang='scss' scoped>
.search-wrap {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    background-color: #1a2127;
    .follow-salon {
        height: 90px;
        background-color: rgb(26, 33, 39);
        text-align: right;
        margin-bottom: 1px;
        .right-ico {
            margin-top: 14px;
            float: left;
            color: #123;
            width: 60px;
            height: 60px;
            margin-left: 10px;
            line-height: 60px;
            background-color: #ffc800;
            border-radius: 15px;
            text-align: center;
            i {
                font-size: 60px;
            }
        }
        .follow {
            margin-right: 12px;
            margin-top: 18px;
            display: inline-block;
            background-color: #ffc800;
            border-radius: 20px;
            width: 200px;
            height: 50px;
            text-align: center;
            line-height: 56px;
            color: white;
        }
    }
    .slider {
        img {
            height: 300px;
        }
        /* /deep/.van-swipe__indicators {
            display: flex;
            position: absolute;
            left: 50%;
            bottom: 0.133333rem;
            transform: translateX(-50%);
            width: 100px;
        } */
    }
    .input-wrap {
        .search-icon {
            margin-right: 4px;
            width: 60px;
            height: 60px;
            vertical-align: top;
            display: inline-flex;
            color: 323233;
            border: 1px solid #ffc800;
            background-color: #ffc800;
            border-radius: 10px;
            justify-content: center;
            align-items: center;
            i {
                font-size: 40px;
            }
        }
        input[type="text"] {
            display: inline-block;
            width: 86%;
            border: 0;
            margin: 0;
            padding: 0;
            resize: none;
            font-size: 28px;
            text-align: right;
            direction: rtl;
            border-radius: 16px;
            height: 66px;
            padding: 3px 10px;
            color: #323233;
            box-sizing: border-box;
            border: 1px solid transparent;
            transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        }
        input:focus {
            outline: none;
            border-color: #ffc800;
        }
    }
}
</style>